<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>权限列表</title>
    <header th:replace="header::html"></header>
</head>

<body class="">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">权限</a>
        <a>
          <cite>权限列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" id="layuiFormPermission">
            <a class="layui-btn" id="crollAll" >折叠展开</a>
            <a class="layui-btn" onclick="x_admin_show('新增权限','/permission/add')" permission="sys:menu:add"><i class="layui-icon"></i>新增权限</a>
        </form>
    </div>

    <table class="layui-hide" id="menuTable" lay-filter="member"></table>

    <script type="text/html" id="barDemo" >
        <a class="layui-btn layui-btn-xs" lay-event="edit" permission="sys:menu:edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" permission="sys:menu:del">删除</a>
    </script>
</div>

<script>

    var treetable,renderTable;
    layui.config({
        base: '/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use('treetable', function () {
        var table = layui.table,
                form = layui.form;
        var $ = layui.jquery;
        var treetable = layui.treetable;
        renderTable = function(){
            treetable.render({
                // 渲染表格
                treeColIndex: 1,          // treetable新增参数
                treeSpid: 0,
                treeIdName:'id',// treetable新增参数
                treePidName: 'parentId',     // treetable新增参数
                treeLinkage: true,        // treetable新增参数
                elem: '#menuTable',
                url: '/permission/menuAll',
                cols: [
                    [
                        {type: 'numbers'},
                        {field: 'name',width:180, title: '名称'},
                        {field: 'href',width:160, title: 'url'},
                        {field: 'sort',width:60, title: '排序'},
                        {field:'permission',title:'资源标识'},
                        {field:'type',width:60,title:'类型',templet:function(d){
                            return  d.type == '1' ? "菜单":"按钮";
                        }},
                        {title:'操作',toolbar:'#barDemo'}
                    ]
                ]
            });
        };
        renderTable();

        /**
         * 折叠
         */
        var croll = false;
        $("#crollAll").click(function () {
            if(croll){
                treetable.expandAll('#menuTable');
                croll=false;
            }else{
                treetable.foldAll('#menuTable');
                croll=true;
            }


        })
        //监听工具条
        table.on('tool(member)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {

                    $.ajax({
                        url: "/permission/delete",
                        type: "GET",
                        data: {id: data.id},
                        dataType: 'json',
                        success: function (result) {
                            layer.alert("删除成功", {icon: 1}, function (index1) {
                                layer.close(index1);
                                x_admin_father_reload();
                            });
                        },
                    });

                });
            } else if (obj.event === 'edit') {
                x_admin_show('编辑用户信息', '/permission/edit/?id=' + data.id);
            }
        })

        //搜索
        form.on('submit(sreach)', function (data) {
            var username = data.field.username;
            table.render({
                elem: '#table'
                , url: '/role/findUserByFuzzyUserName' //数据接口
                , page: true //开启分页
                , where: {
                    "roleName": username
                }
                ,response: {
                    dataName: 'datas' //规定数据列表的字段名称，默认：data
                }
                , cols: [
                    [ //表头
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'id', title: 'ID', width: 60, align: 'center'}
                        , {field: 'name', title: '角色名'}
                        , {field: 'description', title: '描述'}
                        // ,{field: 'status', title: '状态', width:120}
                        , {field: 'updateTime', title: '最后操作时间'}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                    ]
                ]
            });
            return false;
        });
    });
</script>
</body>
</html>